<template>
  <div>
    <el-card>
      <!-- <div> -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <!-- <el-form-item label="" prop="groupLabel">
          
          <el-select
            v-model="queryParams.groupLabel"
            placeholder="请选择分组"
            style="width: 150px"
            @change="getList"
          >
            <el-option
              v-for="dict in dict.type.sys_product_age"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="" prop="productSeason">
          <el-select
            v-model="queryParams.spuList"
            placeholder="请选择-产品spu"
            clearable
            multiple
            style="width: 250px"
            filterable
            remote
            :remote-method="getData"
            allow-create
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!--
          /** 库存总量 */库存总里")@Excel(name =private Integer inventoryQuantityTotal;
/** 库存总价值 */@Excel(name =“库存总价值")private Double inventoryAmountTotal;
库龄详情
          <el-form-item label="" prop="productSeason">
         
          <el-select
            v-model="queryParams.skuList"
            placeholder="请选择商品-sku"
            clearable
            multiple
            style="width: 250px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_jijie"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="" prop="dataDate">
          <el-date-picker
            clearable
            v-model="queryParams.dataDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="入仓日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="transactionDate">
          <el-date-picker
            clearable
            v-model="queryParams.transactionDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="出仓日期"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <div slot="header" class="card-box" style="height: 20px">
        <el-col :span="2">
          <span style="font-weight: 600"
            ><i class="el-icon-collection"></i> 库龄详情</span
          >
        </el-col>
        <el-col :span="15">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="68px"
          >
            <!-- <el-form-item label="" prop="productSeason">
              <el-select
                v-model="queryParams.productSeasonList"
                placeholder="请选择商品-季节"
                clearable
                multiple
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_jijie"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item label="" prop="firstLevelColumnList">
              <el-select
                v-model="queryParams.firstLevelColumnList"
                placeholder="请选择一级类目"
                multiple
                clearable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_pl"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="secondLevelColumnList">
              <el-select
                v-model="queryParams.secondLevelColumnList"
                placeholder="请选择二级类目"
                multiple
                clearable
                filterable
              >
                <el-option
                  v-for="dict in dict.type.sys_product_secondary"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="threeLevelColumnList">
              <el-select
                v-model="queryParams.threeLevelColumnList"
                placeholder="请选择三级类目"
                multiple
                clearable
                filterable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_cycle"
                  :key="dict.label"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="" prop="productSeason">
              <el-select
                v-model="queryParams.itemList"
                placeholder="请选择item"
                clearable
                style="width: 150px"
                filterable
                remote
                :remote-method="getItem"
              >
                <el-option
                  v-for="item in optionsItem"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="productSeason">
              <el-select
                v-model="queryParams.productSeasonList"
                placeholder="请选择商品-季节"
                clearable
                multiple
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_jijie"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getList"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </div>

      <u-table
        :data="tableData"
        :height="height"
        use-virtual
        :row-height="rowHeight"
        border
        @cell-click="tableEdit"
        @sort-change="handleSortChange"
      >
        <u-table-column type="index" width="100" sortable fixed />

        <u-table-column align="center" label="库龄分布" width="850" fixed>
          <u-table-column
            v-if="this.queryParams.groupLabel == 'spu'"
            align="center"
            prop="spu"
            label="spu"
            width="150"
          >
          </u-table-column>
          <u-table-column
            v-if="this.queryParams.groupLabel == 'sku'"
            align="center"
            prop="sku"
            label="商品SKU编号"
            width="150"
          >
          </u-table-column>
          <!-- <u-table-column
          align="center"
          prop="productSeason"
          label="产品季节"
          width="150"
        >
        </u-table-column>
      <u-table-column
          align="center"
          prop="firstLevelColumn"
          label="一级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="secondLevelColumn"
          label="二级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="threeLevelColumn"
          label="三级"
          width="150"
        >
        </u-table-column>
        
      -->
          <!-- <u-table-column
            align="center"
            prop="colorProperty"
            label="颜色"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="proSize"
            label="尺码"
            width="100"
          >
          </u-table-column> -->
          <u-table-column align="center" prop="picUrl" label="主图" width="100">
            <template slot-scope="scope">
              <image-preview :src="scope.row.picUrl" :width="40" :height="40" />
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="earlyOInWarehouseDate"
            label="最近入库日期"
            width="150"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="earlyOutWarehouseDate"
            label="最近出库日期"
            width="150"
            sortable
          >
          </u-table-column>
          <u-table-column
            width="100"
            align="center"
            prop="inventoryQuantityTotal"
            label="库存总量"
          >
          </u-table-column>
          <u-table-column
            width="200"
            align="center"
            prop="inventoryAmountTotal"
            label="库存总价值"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="属性">
          <u-table-column
            align="center"
            prop="productSeason"
            label="季节"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="0~30天">
          <u-table-column
            align="center"
            prop="inventoryQuantity0"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio0"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio0 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount0"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="31~60天">
          <u-table-column
            align="center"
            prop="inventoryQuantity30"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio30"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio30 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount30"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>

        <u-table-column align="center" label="61~90天">
          <u-table-column
            align="center"
            prop="inventoryQuantity60"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio60"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio60 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount60"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="91~120天">
          <u-table-column
            align="center"
            prop="inventoryQuantity90"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio90"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio90 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount90"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="121~150天">
          <u-table-column
            align="center"
            prop="inventoryQuantity120"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio120"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio120 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount120"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="151~180天">
          <u-table-column
            align="center"
            prop="inventoryQuantity150"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio150"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio150 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount150"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="181~240天">
          <u-table-column
            align="center"
            prop="inventoryQuantity180"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio180"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio180 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount180"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="241~300天">
          <u-table-column
            align="center"
            prop="inventoryQuantity240"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio240"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio240 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount240"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="300~365天">
          <u-table-column
            align="center"
            prop="inventoryQuantity300"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio300"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio300 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount300"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="1~2年">
          <u-table-column
            align="center"
            prop="inventoryQuantity1Y"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryQuantityRatio1Y"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryQuantityRatio1Y }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount1Y"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="2~3年">
          <u-table-column
            align="center"
            prop="inventoryQuantity2Y"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryQuantityRatio2Y"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryQuantityRatio2Y }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount2Y"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="3年以上">
          <u-table-column
            align="center"
            prop="inventoryQuantity3Y"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>

          <u-table-column
            align="center"
            prop="inventoryAmountRatio3Y"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio3Y }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount3Y"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
      </u-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.thisPageSize"
        @pagination="getList"
      />
    </el-card>

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <div
        style="margin-left: 2px; margin-right: 2px; height: 460px"
        id="echarts"
      ></div>
      <div
        style="margin-left: 2px; margin-right: 2px; height: 460px"
        id="main"
      ></div>
    </el-row>

    <el-dialog title="" :visible.sync="open" width="80%" v-if="open">
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExportAge"
        >导出</el-button
      >
      <MergeTable :tableData="BiInventoryAgeDwdList" />
      <pagination
        v-show="pageListTotal > 0"
        :total="pageListTotal"
        :page.sync="pageReq.pageNum"
        :limit.sync="pageReq.pageSize"
        @pagination="pageList"
      />
    </el-dialog>
  </div>
</template>

  <script>
import * as echarts from "echarts/lib/echarts.js";
import {
  listBiInventoryAgeDwd,
  getBiInventoryAgeDwd,
  delBiInventoryAgeDwd,
  addBiInventoryAgeDwd,
  updateBiInventoryAgeDwd,
  synData,
  inventoryAgeDetail,
  queryContentByKey,
} from "@/api/Warehouse/BiInventoryAgeDwd";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  addTemplateAndSecondry,
  addProNoColorSize,
  productNoLike,
} from "@/api/product/template";
import MergeTable from "./MergeTable";
import {
  // listBiInventoryAgeDwd,
  // getBiInventoryAgeDwd,
  // delBiInventoryAgeDwd,
  // addBiInventoryAgeDwd,
  // updateBiInventoryAgeDwd,
  // synData,
  voList,
} from "@/api/Warehouse/BiInventoryAgeDwd";
export default {
  props: {
    message: {
      type: String,
      // required: true
      default: "",
    },
  },
  dicts: [
    "sys_product_age",
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
  ],
  components: {
    MergeTable,
  },
  data() {
    return {
      optionsItem: [],
      pageListTotal: 0,
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      rowList: {},
      // inventoryObj: {},
      //关联信息
      BiInventoryAgeDwdList: [],
      open: false,
      pjtUrl: process.env.VUE_APP_BASE_API,

      options: [],
      height: 630,
      rowHeight: 50,
      tableData: [],
      // tableData: Array.from({ length: 5 }, (_, idx) => ({
      //   id: idx + 1,
      //   date: "2016-05-03",
      //   name: "王小虎",
      //   province: "上海",
      //   city: "普陀区",
      //   address: "上海市普陀区金沙江路 1518 弄",
      //   zip: 200333,
      // })),
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        thisPageSize: 10,
        groupLabel: "spu",
        property: "inventoryQuantity0",
        isAsc: false,
        // sku: null,
        // inventoryAgeDays: null,
        // inventoryAgeDateRange: null,
        // inventoryQuantity: null,
        // inventoryAmount: null,
        // firstLevelColumnList: null,
        // secondLevelColumnList: null,
        // threeLevelColumnList: null,
        // productSeasonList: null,
        // groupLabel: null,
        // itemList: null,
        // skuList: null,
        // dataDate: null,
        // transactionDate: null,
      },
    };
  },
  /** 一级 */
  // private List<String> firstLevelColumnList;
  // /** 一级 */
  // private List<String> secondLevelColumnList;

  // /** 三级 */
  // private List<String> threeLevelColumnList;

  // /** 产品季节 */
  // private List<String> productSeasonList;

  // /** 产品款号 */
  // private List<String> itemList;

  // /** sku */
  // private List<String> skuList;
  // private String sku;

  // /** 分组 */
  // private String groupLabel;

  // /** 是否按季节分组 */
  // private Boolean groupSeason;

  // /** 入仓日期 */
  // private Date dataDate;

  // /**出仓日期*/
  // private Date transactionDate;
  watch: {
    // 监听 message 的变化
    message: function (newVal, oldVal) {
      // 当 message 发生变化时，这个函数会被调用
      console.log("Message changed from", oldVal, "to", newVal);
      this.getList();
    },
    // inventoryObj: {
    //   handler: function (newnew, oldold) {
    //     this.getvoList(newnew);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  created() {
    // console.log(JSON.stringify(this.tableData));
  },
  mounted() {
    this.getList();
  },
  methods: {
    tableEdit(row, column, cell, event) {
      console.log(JSON.stringify(row));
      this.rowList = row;
      // this.queryParams.itemList = row.item;
      // this.queryParams.pageNum = 1;
      // delete this.queryParams.thisPageSize;
      let obj = {
        spu: row.spu,
        pageNum: 1,
        groupLabel: "spu",
        thisPageSize: 10,
        property: "inventoryQuantity0",
        isAsc: false,
      };
      inventoryAgeDetail(obj).then((response) => {
        if (response.data) {
          this.myChartBar(response.data);
          this.myChartarea(response.data);
        }
      });
    },
    myChartBar(response) {
      // var myChart = echarts.init(document.getElementById("echarts"));
      var option = {
        title: {
          text: response[0].item,
          // text: "123",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true,
        // },
        legend: {
          data: ["库存数量"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "0~30天",
              "31~60天",
              "61~90天",
              "91~120天",
              "121~150天",
              "151~180天",
              "181~240天",
              "241~300天",
              "300~365天",
              "1~2年",
              "2~3年",
              "3年以上",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "库存数量",
            type: "bar",
            // barWidth: "60%",
            data: [],
          },
        ],
      };

      // 从 JSON 数据中提取库存数量，并填充到 series.data 中
      response.forEach(function (item) {
        option.series[0].data.push(
          item.inventoryQuantity0,
          item.inventoryQuantity30,
          item.inventoryQuantity60,
          item.inventoryQuantity90,
          item.inventoryQuantity120,
          item.inventoryQuantity150,
          item.inventoryQuantity180,
          item.inventoryQuantity240,
          item.inventoryQuantity300,
          item.inventoryQuantity1Y,
          item.inventoryQuantity2Y,
          item.inventoryQuantity3Y
        );
      });
      var myChartDom = document.getElementById("echarts");

      // 检查是否已经存在ECharts实例
      if (echarts.getInstanceByDom(myChartDom)) {
        // 如果存在，销毁它
        echarts.getInstanceByDom(myChartDom).dispose();
      }

      // 初始化新的ECharts实例
      var myChart = echarts.init(myChartDom);

      // Raddar.setOption(option);
      myChart.setOption(option);
      // 为柱状图添加点击事件
      myChart.on("click", this.handleClick);
      // myChart.on("click", function (params) {
      // 控制台输出点击的数据的信息
      // console.log(params);
      // 在这里可以编写你的逻辑代码
      // 例如：弹出一个提示框显示点击的数据的信息
      // alert(
      //   "你点击的是：" +
      //     params.name +
      //     "，系列：" +
      //     params.seriesName +
      //     "，数据值：" +
      //     params.value +
      //     "，数据值：" +
      //     response[0].item
      // );

      // let obj = {
      //   item: response[0].item,
      //   inventoryAgeDateRange: params.name,
      // };
      // voList(obj).then((response) => {
      //   this.BiInventoryAgeDwdList = response.rows;
      //   this.open = true;
      //   // this.total = response.total;
      //   // this.loading = false;
      // });
      // console.log(JSON.stringify(this.inventoryObj));
      // this.getvoList(obj);
      // });
    },
    handleClick(params) {
      // alert(
      //   "你点击的是：" +
      //     params.name +
      //     "，系列：" +
      //     params.seriesName +
      //     "，数据值：" +
      //     params.value
      // );
      this.pageReq = {
        ...this.pageReq,
        item: this.rowList.item,
        inventoryAgeDateRange: params.name,
      };
      voList(this.pageReq).then((response) => {
        this.BiInventoryAgeDwdList = response.rows;

        this.pageListTotal = response.total;
        this.open = true;
        // this.loading = false;
      });
    },
    pageList() {
      voList(this.pageReq).then((response) => {
        this.BiInventoryAgeDwdList = response.rows;

        this.pageListTotal = response.total;
        this.open = true;
        // this.loading = false;
      });
    },
    // getvoList(obj) {
    //   voList(obj).then((response) => {
    //     this.BiInventoryAgeDwdList = response.rows;
    //     this.open = true;
    //     // this.total = response.total;
    //     // this.loading = false;
    //   });
    // },
    myChartarea(response) {
      // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: response[0].item,
          // text: "库存价值占比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["库存价值"],
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "0~30天",
            "31~60天",
            "61~90天",
            "91~120天",
            "121~150天",
            "151~180天",
            "181~240天",
            "241~300天",
            "300~365天",
            "1~2年",
            "2~3年",
            "3年以上",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "库存价值",
            type: "line", // 指定为折线图
            areaStyle: {}, // 开启面积图
            data: [], // 这里会填充从 JSON 中提取的数据
          },
        ],
      };

      // 从 JSON 数据中提取库存数量，并填充到 series.data 中
      response.forEach(function (item) {
        option.series[0].data.push(
          item.inventoryAmount0,
          item.inventoryAmount30,
          item.inventoryAmount60,
          item.inventoryAmount90,
          item.inventoryAmount120,
          item.inventoryAmount150,
          item.inventoryAmount180,
          item.inventoryAmount240,
          item.inventoryAmount300,
          item.inventoryAmount1Y,
          item.inventoryAmount2Y,
          item.inventoryAmount3Y
        );
      });

      // 使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option);
      var myChartDom = document.getElementById("main");

      // 检查是否已经存在ECharts实例
      if (echarts.getInstanceByDom(myChartDom)) {
        // 如果存在，销毁它
        echarts.getInstanceByDom(myChartDom).dispose();
      }

      // 初始化新的ECharts实例
      var myChart = echarts.init(myChartDom);

      // Raddar.setOption(option);
      myChart.setOption(option);

      // myChart.on("click", function (params) {
      //   console.log(JSON.stringify(params.dataIndex)); // 这是被点击的柱子的索引，你可以通过这个索引获取到数据
      //   console.log(JSON.stringify(params.seriesIndex)); // 这是被点击的柱子的系列的索引，你可以通过这个索引获取到数据
      // });
    },
    /* 获取货号列表 */
    getData(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      productNoLike(key).then((res) => {
        this.loading = false;
        this.productNooptions = res.data;
        this.options = res.data;
        // console.log(JSON.stringify(this.options));
      });
    },
    //
    getItem(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      queryContentByKey({ keyWord: key }).then((res) => {
        // this.loading = false;
        this.optionsItem = res.data;
        // console.log(JSON.stringify(this.options));
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.thisPageSize = 10;
      this.openLoading();
      inventoryAgeDetail(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.tableData = response.data;
        this.total = response.totalCount;
        // this.loading = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      this.queryParams.groupLabel = "spu";
      this.queryParams.isAsc = false;
      this.queryParams.property = "inventoryQuantity0";
      this.handleQuery();
    },
    handleSortChange(column) {
      /**
  排序方向 asc 升序 desc 降序
 
private String orderDirection;*/
      switch (column.order) {
        case "ascending":
          this.queryParams.isAsc = true;
          break;
        case "descending":
          this.queryParams.isAsc = false;
          break;
        default:
          this.queryParams.isAsc = null;
          break;
      }
      this.queryParams.property = column.prop; //查询字段是表格中字段名字
      // this.queryParams.orderDirection = column.order;//动态取值排序顺序

      this.getList();
    },
    /** 查询库龄列表 */
    getList() {
      // this.loading = true;
      // delete this.queryParams.itemList;
      this.openLoading();
      inventoryAgeDetail(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.tableData = response.data;
        this.total = response.totalCount;
        if (this.tableData.length > 0) {
          this.tableEdit(this.tableData[0]);
        }
        // this.loading = false;
      });
    },
    handleExportAge() {
      this.download(
        "financial/BiInventoryAgeDwd/export",
        {
          ...this.pageReq,
        },
        `BiInventoryAgeDwd_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "financial/BiInventoryAgeDwd/detailExport",
        {
          ...this.queryParams,
        },
        `detailExport_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

    /** 一级 */
    @Excel(name = "一级")
    private String firstLevelColumn;
    /** 一级 */
    @Excel(name = "二级")
    private String secondLevelColumn;

    /** 三级 */
    @Excel(name = "三级")
    private String threeLevelColumn;

    /** 产品季节 */
    @Excel(name = "产品季节")
    private String productSeason;

    /** 产品款号 */
    @Excel(name = "产品款号")
    private String item;

    /** sku */
    @Excel(name = "sku")
    private String sku;

    /** 最近入库时间 */
    @Excel(name = "最近入库时间")
    private Date earlyOInWarehouseDate;

    /** 最近出库时间 */
    @Excel(name = "最近出库时间")
    private Date earlyOutWarehouseDate;

    /** 0~30天库存量 */
    @Excel(name = " 0~30天库存量")
    private Integer inventoryQuantity;

    /** 0~30天库存金额 */
    @Excel(name = "0~30天库存金额")
    private Double inventoryAmount;

    /** 31~60天库存量 */
    @Excel(name = "31~60天库存量")
    private Integer inventoryQuantity30;

    /** 31~60天库存金额 */
    @Excel(name = "31~60天库存金额")
    private Double inventoryAmount30;

    /** 61~90天库存量 */
    @Excel(name = "61~90天库存量")
    private Integer inventoryQuantity60;

    /** 61~90天库存金额 */
    @Excel(name = "61~90天库存金额")
    private Double inventoryAmount60;

    /** 91~120天库存量 */
    @Excel(name = "91~120天库存量")
    private Integer inventoryQuantity90;

    /** 91~120天库存金额 */
    @Excel(name = "91~120天库存金额")
    private Double inventoryAmount90;

    /** 121~150天库存量 */
    @Excel(name = "121~150天库存量")
    private Integer inventoryQuantity120;

    /** 121~150天库存金额 */
    @Excel(name = "121~150天库存金额")
    private Double inventoryAmount120;

    /** 151~180天库存量 */
    @Excel(name = "151~180天库存量")
    private Integer inventoryQuantity150;

    /** 151~180天库存金额 */
    @Excel(name = "151~180天库存金额")
    private Double inventoryAmount150;

    /** 181~240天库存量 */
    @Excel(name = "181~240天库存量")
    private Integer inventoryQuantity180;

    /** 181~240天库存金额 */
    @Excel(name = "181~240天库存金额")
    private Double inventoryAmount180;

    /** 241~300天库存量 */
    @Excel(name = "241~300天库存量")
    private Integer inventoryQuantity240;

    /** 241~300天库存金额 */
    @Excel(name = "241~300天库存金额")
    private Double inventoryAmount240;

    /** 300~365天库存量 */
    @Excel(name = "300~365天库存量")
    private Integer inventoryQuantity300;

    /** 300~365天库存金额 */
    @Excel(name = "300~365天库存金额")
    private Double inventoryAmount300;

    /** 1~2年库存量 */
    @Excel(name = "1~2年库存量")
    private Integer inventoryQuantity1Y;

    /** 1~2年库存金额 */
    @Excel(name = "1~2年库存金额")
    private Double inventoryAmount1Y;

    /** 2~3年库存量 */
    @Excel(name = "2~3年库存量")
    private Integer inventoryQuantity2Y;

    /** 2~3年库存金额 */
    @Excel(name = "2~3年库存金额")
    private Double inventoryAmount2Y;

    /** 3年以上库存量 */
    @Excel(name = "3年以上库存量")
    private Integer inventoryQuantity3Y;

    /** 3年以上库存金额 */
    @Excel(name = "3年以上库存金额")
    private Double inventoryAmount3Y;
sku/item/三级/二级/一级